<template>
	<view>
		<form @submit="formSubmit" report-submit='true'>
			 
			<view class='addAddress pad30'>
				<view class='list borRadius14'>
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>联系人</view>
						<input type='text' placeholder='请输入联系人' placeholder-style="color:#ccc;" name='account'
							:value="model.account" placeholder-class='placeholder' maxlength="4"></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>电话</view>
						<input type='number' placeholder='请输入电话' placeholder-style="color:#ccc;" name="phone"
							:value='model.phone' placeholder-class='placeholder' maxlength="11"></input>
					</view>
					<view class='item acea-row row-between-wrapper relative'>
						<view class='name'>所在地区</view>
						<view class="address">
							<picker mode="multiSelector" @change="bindRegionChange"
								@columnchange="bindMultiPickerColumnChange" :value="valueRegion" :range="multiArray">
								<view class='acea-row'>
									<view class="picker line1">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
									<view class='iconfont icon-xiangyou abs_right'></view>
								</view>
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper relative'>
						<view class='name'>详细地址</view>
						<input type='text' placeholder='请填写具体地址' placeholder-style="color:#ccc;" name='address'
							placeholder-class='placeholder' v-model='model.address' maxlength="18"></input>
						<view class='iconfont icon-dizhi font-color abs_right' @tap="chooseLocation"></view>
					</view>
				</view>

				<button class='keepBnt bg-color' form-type="submit">立即取消</button>

			</view>
		</form>

	</view>
</template>

<script>
	import {
		cancelUp,
	} from '@/api/user.js';
	import {
		getCity
	} from '@/api/api.js';
	export default {

		data() {
			return {
				regionDval: ['浙江省', '杭州市', '滨江区'],
				id: 0, //地址id
				model: {}, //地址详情
				region: ['省', '市', '区'],
				valueRegion: [0, 0, 0],
				provinceId: '',
				cityId: '',
				areaId: '',
				district: [],
				multiArray: [],
				multiIndex: [0, 0, 0],
				defaultRegion: ['广东省', '广州市', '番禺区'],
				defaultRegionCode: '440113',
				gpId: ''
			};
		},
		onLoad(options) {
			console.log(options, '-=-=-=')
			this.gpId = options.id || ''
			this.getCityList();
		},
		methods: {
			// #ifdef APP-PLUS
			// 获取选择的地区
			handleGetRegion(region) {
				this.region = region
			},
			// #endif
			// 获取地址数据
			getCityList: function() {
				let that = this;
				getCity().then(res => {
					this.district = res.data;
					let oneDay = 24 * 3600 * 1000;
					// this.$Cache.set('cityList', JSON.stringify(res.data)); //设置不过期时间的方法 
					this.$Cache.setItem({
						name: 'cityList',
						value: res.data,
						expires: oneDay * 7
					}); //设置七天过期时间
					that.initialize();
				})
			},

			initialize: function() {
				let that = this,
					province = [],
					city = [],
					area = [];
				if (that.district.length) {
					let cityChildren = that.district[0].child || [];
					let areaChildren = cityChildren.length ? (cityChildren[0].child || []) : [];
					that.district.forEach(function(item) {
						province.push(item.name);
					});
					cityChildren.forEach(function(item) {
						city.push(item.name);
					});
					areaChildren.forEach(function(item) {
						area.push(item.name);
					});
					this.multiArray = [province, city, area]
				}
			},
			bindRegionChange: function(e) {
				let multiIndex = this.multiIndex,
					province = this.district[multiIndex[0]] || {
						child: []
					},
					city = province.child[multiIndex[1]] || {
						cityId: 0
					},

					multiArray = this.multiArray,
					value = e.detail.value;
				const _curentItem = this.district[value[0]]
				const _cldrenItem = _curentItem.child[value[1]]
				this.provinceId = _curentItem.cityId
				this.cityId = _cldrenItem.cityId
				if (value[2]) {
					const trreeItem = _cldrenItem.child[value[2]]
					this.areaId = trreeItem.cityId
				}
				this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
				this.valueRegion = [0, 0, 0]
				this.initialize();
			},
			bindMultiPickerColumnChange: function(e) {
				let that = this,
					column = e.detail.column,
					value = e.detail.value,
					currentCity = this.district[value] || {
						child: []
					},
					multiArray = that.multiArray,
					multiIndex = that.multiIndex;
				multiIndex[column] = value;
				switch (column) {
					case 0:
						let areaList = currentCity.child[0] || {
							child: []
						};
						multiArray[1] = currentCity.child.map((item) => {
							return item.name;
						});
						multiArray[2] = areaList.child.map((item) => {
							return item.name;
						});
						break;
					case 1:
						let cityList = that.district[multiIndex[0]].child[multiIndex[1]].child || [];
						multiArray[2] = cityList.map((item) => {
							return item.name;
						});
						break;
					case 2:

						break;
				}
				// #ifdef MP || APP-PLUS
				this.$set(this.multiArray, 0, multiArray[0]);
				this.$set(this.multiArray, 1, multiArray[1]);
				this.$set(this.multiArray, 2, multiArray[2]);
				// #endif
				// #ifdef H5
				this.multiArray = multiArray;
				// #endif
				this.multiIndex = multiIndex
				// this.setData({ multiArray: multiArray, multiIndex: multiIndex});
			},

			chooseLocation: function() {
				uni.chooseLocation({
					success: (res) => {
						this.$set(this.model, 'address', res.address);
					}
				})
			},

			formSubmit: function(e) {
				let that = this,
					value = e.detail.value;
				if (!value.account) return that.$util.Tips({
					title: '请填写联系人'
				});
				if (!value.phone) return that.$util.Tips({
					title: '请填写电话'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.phone)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (that.region.join('-') == '省-市-区') return that.$util.Tips({
					title: '请选择所在地区'
				});
				if (!value.address) return that.$util.Tips({
					title: '请填写详细地址'
				});
				const _address = that.region.join('') + value.address
				value.address = _address
				value.id = that.gpId
				uni.showLoading({
					title: '取消中',
					mask: true
				})
				cancelUp(value).then(res => {
					that.$util.Tips({
						title: res.message
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.addAddress {
		padding-top: 20rpx;
	}

	.addAddress .list {
		background-color: #fff;
		padding: 0 24rpx;
	}

	.addAddress .list .item {
		border-top: 1rpx solid #eee;
		height: 90rpx;
		line-height: 90rpx;
	}

	.addAddress .list .item .name {
		// width: 195rpx;
		font-size: 30rpx;
		color: #333;
	}

	.addAddress .list .item .address {
		flex: 1;
		margin-left: 50rpx;
	}

	.addAddress .list .item input {
		width: 475rpx;
		font-size: 30rpx;
		font-weight: 400;
	}

	.addAddress .list .item .placeholder {
		color: #ccc;
	}

	.addAddress .list .item picker .picker {
		width: 410rpx;
		font-size: 30rpx;
	}

	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}

	.addAddress .default checkbox {
		margin-right: 15rpx;
	}

	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 80rpx auto 24rpx auto;
		font-size: 32rpx;
		color: #fff;
	}

	.addAddress .wechatAddress {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #5189EA;
		border: 1px solid #5189EA;
	}

	.relative {
		position: relative;
	}

	.icon-dizhi {
		font-size: 44rpx;
		z-index: 100;
	}

	.abs_right {
		position: absolute;
		right: 0;
	}
</style>